<template>
  <div>
    <el-container style="position: absolute;width: 99%;height: 99%;">
      <!-- ==========顶部=================================== -->
      <el-header style="height: 100px;display: flex;">
        <div id="frame-header-container" class="header-container">
          <div class="frame-bg-container">
            <img class="frame-header-bg" src="@/assets/img/header_bg.jpg"/>
          </div>
          <div class="frame-header-context-container">
            <div id="frame-left-container" class="left-container">
              <img id="frame-icon" class="frame-icon" src="@/assets/img/icon.png">
              <div id="frame-title-container" class="frame-title-container">
                <div id="frame-title" class="frame-title">公租通后台管理系统</div>
              </div>
            </div>
            <div id="frame-right-container" class="frame-right-container">
              <div id="frame-header-tip-container" class="frame-header-tip-container">
                <div style="position:relative;top:50%;transform: translate(0,-50%)">
                  <div style="text-align: center">欢迎您，您上次登录时间为</div>
                  <div style="text-align: center">
                    {{ last_log_time === 'null' ? '您当前第一次登录' : formatDate(last_log_time) }}
                  </div>
                </div>
              </div>
              <div id="frame-set-container" class="frame-set-container">
                <el-dropdown trigger="click">
                  <i class="el-icon-s-tools"></i>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="personMessage">个人信息</el-dropdown-item>
                    <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
          </div>
        </div>
      </el-header>
      <!-- =============================================== -->
      <el-container>
        <!-- ==========菜单栏=================================== -->
        <el-aside width="200px">
          <el-menu :default-active="activeMenu" class="el-menu-vertical-demo"
                   text-color="#000000" active-text-color="#FF00FF" @select="handleMenuSelect">
            <el-menu-item style="background-color: #87CEFA" index="1" :class="{ 'menu-selected': activeMenu === '1' }">
              <i class="el-icon-menu"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <div class="menu-space-title"></div>
            <!--===============房源管理==================-->
            <el-submenu index="2">
              <template slot="title">
                <!--                <img src="../../assets/img/menu.jpg" style="z-index:1;width:100%;height: 100%;">-->
                <!--                <div>-->
                <i class="el-icon-s-home"></i>
                <span>房源管理</span>
                <!--                </div>-->
              </template>
              <el-menu-item-group>
                <el-menu-item index="2-1" :class="{ 'menu-selected': activeMenu === '2-1' }">
                  <i class="el-icon-star-off"></i>
                  <span>房源列表</span>
                </el-menu-item>
                <el-menu-item index="2-2" :class="{ 'menu-selected': activeMenu === '2-2' }">
                  <i class="el-icon-star-off"></i>
                  <span>房源统计</span>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <div class="menu-space-title"></div>
            <!--=========================用户管理=======================-->
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-s-custom"></i>
                <span>用户管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="3-1" :class="{ 'menu-selected': activeMenu === '3-1' }">
                  <i class="el-icon-star-off"></i>
                  <span>用户列表</span>
                </el-menu-item>

                <el-menu-item index="3-2" :class="{ 'menu-selected': activeMenu === '3-2' }">
                  <i class="el-icon-star-off"></i>
                  <span>用户类型</span>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <div class="menu-space-title"></div>
            <!--=========================申请管理=======================-->
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-s-order"></i>
                <span>申请管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="4-1" :class="{ 'menu-selected': activeMenu === '4-1' }">
                  <i class="el-icon-star-off"></i>
                  <span>租房申请</span>
                </el-menu-item>

                <el-menu-item index="4-2" :class="{ 'menu-selected': activeMenu === '4-2' }">
                  <i class="el-icon-star-off"></i>
                  <span>退租申请</span>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <div class="menu-space-title"></div>
            <!--=========================公告管理=======================-->
            <el-submenu index="5">
              <template slot="title">
                <i class="el-icon-message"></i>
                <span>公告管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="5-1" :class="{ 'menu-selected': activeMenu === '5-1' }">
                  <i class="el-icon-star-off"></i>
                  <span>公告列表</span>
                </el-menu-item>

                <el-menu-item v-authority="'老板'" index="5-2" :class="{ 'menu-selected': activeMenu === '5-2' }">
                  <i class="el-icon-star-off"></i>
                  <span>新增公告</span>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <div class="menu-space-title"></div>
            <!--=========================巡查监督=======================-->
            <el-submenu index="6">
              <template slot="title">
                <i class="el-icon-view"></i>
                <span>巡查监督</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="6-1" :class="{ 'menu-selected': activeMenu === '6-1' }">
                  <i class="el-icon-star-off"></i>
                  <span>巡查派遣</span>
                </el-menu-item>

                <el-menu-item index="6-2" :class="{ 'menu-selected': activeMenu === '6-2' }">
                  <i class="el-icon-star-off"></i>
                  <span>问题上报</span>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <div class="menu-space-title"></div>
            <!--=========================反馈管理=======================-->
            <el-submenu index="7">
              <template slot="title">
                <i class="el-icon-document-copy"></i>
                <span>反馈管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="7-1" :class="{ 'menu-selected': activeMenu === '7-1' }">
                  <i class="el-icon-star-off"></i>
                  <span>反馈处理</span>
                </el-menu-item>

                <el-menu-item index="7-2" :class="{ 'menu-selected': activeMenu === '7-2' }">
                  <i class="el-icon-star-off"></i>
                  <span>已处理列表</span>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <div class="menu-space-title"></div>
            <!--=========================账户管理=======================-->
            <el-submenu index="8">
              <template slot="title">
                <i class="el-icon-user-solid"></i>
                <span>账户管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="8-1" :class="{ 'menu-selected': activeMenu === '8-1' }">
                  <i class="el-icon-star-off"></i>
                  <span>账户列表</span>
                </el-menu-item>

                <el-menu-item v-authority="'老板'" index="8-2" :class="{ 'menu-selected': activeMenu === '8-2' }">
                  <i class="el-icon-star-off"></i>
                  <span>权限管理</span>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!-- ============================================= -->
        <el-container>
          <!-- ==========内容部分=================================== -->
          <el-main>
            <router-view></router-view>
            <div class="tip-message" v-if="tipMessage">
              <h2 style="text-align: center">
                提示！
              </h2>
              <p style="position:relative;top: 30px;">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;您当前第一次登录，请您修改个人信息和密码，此信息只提示一次，注意！！！
              </p>
              <button style="position:relative;float: right;top: 100px;right: 30px" @click="confirmTip">确认</button>
            </div>
          </el-main>
          <!-- ============================================= -->

          <!-- ==========底部信息=================================== -->
          <el-footer style="height: 40px;">
            <!--时钟设计-->
            <div id="frame-clock-container" class="frame-clock-container">
              <div id="frame-clock" class="frame-clock">
                <h1 style="display: inline">当前时间: </h1>
                <Clock style="display: inline"/>
              </div>
            </div>
          </el-footer>
          <!-- ==========菜单栏=================================== -->
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
/*通过下面三行代码确定标签中有几个字符，但是用在公式（letter-spacing)中却是不准确的*/
// var text = document.getElementById("title').innerText;
// var numCharacters = text.length;
// console.log("字符数：" + numCharacters);
import Clock from "../util/Clock.vue";
import {formatDate} from "../util/js/utils";

export default {
  name: 'Framework',
  components: {Clock},
  data() {
    return {
      // 将登录时间渲染在页面上
      last_log_time: '',
      tipMessage: false, // 打开信息提示页面
      activeMenu: '1',  //放大行为
    };
  },
  created() {
    const logTime = sessionStorage.getItem('logTime')
    const pathFrom = sessionStorage.getItem('pathFrom')
    const referer = document.referrer;
    // 如果是从登录页面进来的路径
    if(pathFrom === ('/login')){
      // 删除session，否则会出现在当前会话刷新页面一直进入这里面，就不会执行else的操作
      sessionStorage.removeItem('pathFrom')
      if (logTime === 'one') {
        // 第一次登录
        this.last_log_time = 'null';
        // 重定向到信息页面，提示修改信息
        this.tipMessage = true;// 打开提示信息页面
      } else {
        // 非第一次登录
        this.last_log_time = logTime;
        // 重定向到首页
        this.$router.push({path: '/framework/home'});
      }
    }else{
      this.loadActiveMenu();
      this.last_log_time = logTime;
    }
  },
  methods: {
    formatDate,
    // 个人信息页面
    personMessage() {
      this.$router.push({path: '/framework/personMessage'})
    },

    // 退出登录
    logout() {
      // 清除token
      sessionStorage.removeItem("token")
      // 跳转到登录页面
      this.$router.push({path: '/login'});
    },
    // 处理菜单展开与选中
    loadActiveMenu() {
      const activeMenu = sessionStorage.getItem('activeMenu');
      if (activeMenu) {
        this.handleMenuSelect(activeMenu);
      }
    },
    // 处理菜单选择
    handleMenuSelect(index) {
      sessionStorage.setItem("activeMenu", index);
      this.activeMenu = index; //设置放大的菜单选项
      // 根据菜单项的 index 触发对应的路由导航
      switch (index) {
        case '1':
          this.$router.push({path: '/framework/home'});
          break;
        case '2-1':
          this.$router.push({path: '/framework/houseList'});
          break;
        case '2-2':
          this.$router.push({path: '/framework/houseStatistics'});
          break;
        case '3-1':
          this.$router.push({path: '/framework/userList'});
          break;
        case '3-2':
          this.$router.push({path: '/framework/userType'});
          break;
        case '4-1':
          this.$router.push({path: '/framework/rentalApply'});
          break;
        case '4-2':
          this.$router.push({path: '/framework/leaseTerminationApply'});
          break;
        case '5-1':
          this.$router.push({path: '/framework/noticeList'});
          break;
        case '5-2':
          this.$router.push({path: '/framework/insertNotice'});
          break;
        case '6-1':
          this.$router.push({path: '/framework/inspectionDispatch'});
          break;
        case '6-2':
          this.$router.push({path: '/framework/problemReporting'});
          break;
        case '7-1':
          this.$router.push({path: '/framework/opinionExam'});
          break;
        case '7-2':
          this.$router.push({path: '/framework/opinionList'});
          break;
        case '8-1':
          this.$router.push({path: '/framework/accountList'});
          break;
        case '8-2':
          this.$router.push({path: '/framework/authorityManagement'});
          break;
        default:
          break;
      }
    },
    // 确认提示信息，关闭弹窗
    confirmTip() {
      this.tipMessage = false;
      this.$router.push({path: '/framework/personMessage'});
    }
  }
}
</script>

<style>
@import "frameworkCss.css";
</style>
